
import { ProTable, ProColumns } from '@ant-design/pro-components';
import { Button } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import { PlusOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

import { productList } from '../../api/axios8081'
import ProductActionButton from '../Button/ProductActionButton';


export type ProductQueryDto = Partial<record>;

// 定义GithubIssueItem类型  
export type record = {
  id: string; // 注意：这里变成了字符串，根据后端返回的数据调整  
  name: string;
  num: number; // 注意：这里变成了数字，根据后端返回的数据调整  
  onlineTime: string; // 注意：字段名从onLineTime改为了onlineTime  
  downlineTime: string; // 注意：字段名从downLineTime改为了downlineTime  
  status: number; // 注意：这里变成了数字，根据后端返回的数据调整  
  adminUser: string;
};

type Product = {
  list: record[];
  total: number;
};

// 定义表格列  
const columns: ProColumns<record>[] = [
  {
    title: '商品ID', // 通常这里应该是'商品ID'  
    dataIndex: 'id',

    // ... 其他属性保持不变或根据需要调整  
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    copyable: true,
    ellipsis: { showTitle: true },
    render: (_, record) => (
      <Link
        to={`/part/${record.id}`}
        onClick={(e) => {
          e.preventDefault(); // 阻止默认的链接跳转行为  
          localStorage.setItem('selectedProduct', JSON.stringify(record)); // 保存数据到localStorage  
          window.location.href = `/list/part/${record.id}`; // 手动导航到新页面  
        }}
      >
        {record.name}
      </Link>
    )
    // ... 其他属性保持不变或根据需要调整  
  },
  {
    title: '库存',
    dataIndex: 'num',
    hideInSearch: true,
    // ... 这里不需要copyable或tooltip，因为库存通常是一个数字  
  },
  {
    title: '开始时间',
    dataIndex: 'onlineTime',
    valueType: 'date',
    sorter: true,
    // ... 其他属性保持不变或根据需要调整  
  },
  {
    title: '结束时间', // 通常这里应该是'下线时间'  
    dataIndex: 'downlineTime',
    valueType: 'date',
    // ... 其他属性保持不变或根据需要调整，hideInSearch可能仍然适用  
  },
  {
    title: '商品状态',
    dataIndex: 'status',
    filters: true,
    onFilter: (value, record) => record.status === Number(value), // 确保比较的是数字  
    valueType: 'select',
    valueEnum: {
      '1': { text: '审核中' }, // 根据实际状态替换描述  
      '2': { text: '审核通过' },
      '3': { text: '审核失败' },
      '4': { text: '已上线' },
      '5': { text: '已下线' },
      '0': { text: '未审核' },
      // ... 根据实际状态码添加更多选项  
    },
    // ... 其他属性保持不变或根据需要调整  
  },
  {
    title: '管理人',
    dataIndex: 'adminUser',
    copyable: true,
    // ... 其他属性保持不变或根据需要调整  
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (_, record) => (
      <ProductActionButton productId={record.id} status={record.status} />
    )
  },
];


// IssueTable组件，是一个React函数组件  
const IssueTable: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState<record[]>([]);
  const [total, setTotal] = useState(0); // 单独维护total状态  
  const [activeKey, setActiveKey] = useState<string>('tab1');
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);
  const [filterOptions, setFilterOptions] = useState<Partial<ProductQueryDto>>({});

  // 获取产品列表的函数  
  const fetchProductList = async (params: any, filterOptions: Partial<ProductQueryDto> = {}) => {
    setLoading(true);
    console.log(params, 'params')
    try {
      const page = params.current;
      const size = params.pageSize;
      const queryDto: ProductQueryDto = {};
      if (params.id) queryDto.id = params.id;
      if (params.name) queryDto.name = params.name;
      if (params.onlineTime) queryDto.onlineTime = params.onlineTime;
      if (params.downlineTime) queryDto.downlineTime = params.downlineTime;
      if (params.status) queryDto.status = params.status;
      if (params.adminUser) queryDto.adminUser = params.adminUser;
      const response = await productList(page, size, queryDto);

      const total: Product = response.data;
      const list: Product = response.data.record;
      console.log(list, 'weishenmehuizhey ')
      console.log(total, 'weishenmehuizhey ')
      setDataSource(response.data.record)
      setTotal(response.data.total)
      return {
        data: [], // 数据列表  
        total: 0, // 数据总数  
        success: true, // 表示请求成功  
      };
    } catch (error) {
      console.error('获取产品信息失败:', error);
      return {
        data: [],
        total: 0,
        success: false,
      };
    }
  };

  const handleTabChange = async (key: string) => {
    setActiveKey(key);

    // 根据activeKey设置筛选条件  
    let newFilterOptions: Partial<ProductQueryDto> = {};
    switch (key) {
      case 'tab2': // 已上线  
        newFilterOptions = { status: 4 };
        break;
      case 'tab3': // 未上线  
        newFilterOptions = { status: 2 }; // 假设后端支持这种非等于查询  
        break;
      // ... 其他情况  
    }
    setFilterOptions(newFilterOptions);
    // 调用函数获取筛选后的数据  
    const response = await fetchProductList(newFilterOptions);
    setDataSource(response.data);
    setTotal(response.total);
  };

  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/list/addgood');
  };


  return (
    <ProTable<record>
      request={(params, sort) => fetchProductList(params, filterOptions)}
      dataSource={dataSource}
      columns={columns} // 传入定义好的列配置 
      headerTitle="商品列表"
      pagination={{
        showSizeChanger: false,
        current: page, // 使用 page 状态作为当前页码  
        pageSize: size, // 使用 size 状态作为每页大小 
        total: total,
        simple: true,
        onChange: (newPage) => {
          setPage(newPage);
          console.log('Page changed to:', newPage);
        },
      }}
      toolBarRender={() => [
        <Button
          key="button"
          icon={<PlusOutlined />}
          onClick={handleClick}
          type="primary"
        >
          新建
        </Button>,
      ]}

      toolbar={{
        multipleLine: true,

        // 保留 tabs 配置以处理标签切换  
        tabs: {
          activeKey,
          onChange: (key) => setActiveKey(key as string),

          items: [
            {
              key: 'tab1',
              tab: '全部',
            },
            {
              key: 'tab2',
              tab: '已上线',
            },
            {
              key: 'tab3',
              tab: '未上线',
            },
          ],
        },
      }}
      rowKey="id" // 注意这里假设你的数据项有一个唯一的 id 字段，而不是 key  

    />
  );
}

// 导出IssueTable组件和columns保持不变...  
export default IssueTable;
export { columns };
